<template>
	<div class="mod-lswms__orderdetaillist">
		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
			<el-form-item>
				<el-input v-model="dataForm.line" size="small" placeholder="明细行号" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-input v-model="dataForm.linelist" size="small" placeholder="明细记录行号" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-input v-model="dataForm.sku" size="small" placeholder="物料编码" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-input v-model="dataForm.descr" size="small" placeholder="物料名称" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<!-- <el-input v-model="dataForm.status" placeholder="状态" clearable></el-input> -->
				<el-select size="small" v-model="dataForm.status " placeholder="请选择">
					<el-option value="" label="--"> </el-option>
					<el-option v-for="item in orderlistStatus" :key="item.list" :label="item.listname"
						:value="reString(item.list)">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button @click="getDataList()" size="small">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="small" @click="addOrUpdateOrderdetailHandleFn()" v-if="hasPermission('lswms:orderdetaillist:save')">新增</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="danger" size="small" @click="deleteHandle()" v-if="hasPermission('lswms:orderdetaillist:delete')">删除</el-button>
			</el-form-item>
			<!-- <el-form-item>
				<el-button type="info" size="small" @click="exportHandle()">导出</el-button>
			</el-form-item> -->
		</el-form>
		<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
			@sort-change="dataListSortChangeHandle" style="width: 100%;">
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<!-- <el-table-column prop="id" label="序号" header-align="center" align="center"></el-table-column> -->
			<el-table-column prop="orderkey" label="出库单号" header-align="center" align="center"></el-table-column>
			<el-table-column prop="line" label="明细行号" header-align="center" align="center"></el-table-column>
			<el-table-column prop="linelist" label="明细记录行号" header-align="center" align="center"></el-table-column>
			<el-table-column prop="sku" label="物料编码" header-align="center" align="center"></el-table-column>
			<el-table-column prop="descr" label="物料名称" header-align="center" align="center"></el-table-column>
			<el-table-column prop="unit" label="单位" header-align="center" align="center"></el-table-column>
			<el-table-column prop="pack" label="包装" header-align="center" align="center"></el-table-column>
			<!-- <el-table-column prop="status" label="状态" header-align="center" align="center"></el-table-column> -->
			<el-table-column prop="statusstr" label="状态" header-align="center" align="center"></el-table-column>
			<el-table-column prop="qty" label="数量" header-align="center" align="center"></el-table-column>
			<el-table-column prop="actqty" label="实际数量" header-align="center" align="center"></el-table-column>

			<el-table-column prop="loc" label="当前库位" header-align="center" align="center"></el-table-column>
			<el-table-column prop="tray" label="当前箱" header-align="center" align="center"></el-table-column>
			<!-- <el-table-column prop="box" label="当前容器" header-align="center" align="center"></el-table-column> -->
			<el-table-column prop="boxstr" label="当前格" header-align="center" align="center"></el-table-column>
			<el-table-column prop="toloc" label="至库位" header-align="center" align="center"></el-table-column>
			<el-table-column prop="totray" label="至箱" header-align="center" align="center"></el-table-column>
			<!-- <el-table-column prop="tobox" label="至容器" header-align="center" align="center"></el-table-column> -->
			<el-table-column prop="toboxstr" label="至格" header-align="center" align="center"></el-table-column>
			<el-table-column prop="lot" label="批号" header-align="center" align="center"></el-table-column>
			<el-table-column prop="remark" label="备注" header-align="center" align="center"></el-table-column>
			<el-table-column prop="adduser" label="创建人" header-align="center" align="center"></el-table-column>
			<el-table-column prop="addtime" label="创建时间" header-align="center" align="center"></el-table-column>
			<el-table-column prop="updatuser" label="修改人" header-align="center" align="center"></el-table-column>
			<el-table-column prop="updatetime" label="修改时间" header-align="center" align="center"></el-table-column>
			<el-table-column type="expand" fixed="right" label="详情">
				<template #default="props">
					<el-form label-position="left" inline class="demo-table-expand">
						<!-- <el-table-column prop="fromloc" label="自库位" header-align="center" align="center"></el-table-column>
						<el-table-column prop="fromtray" label="自托盘" header-align="center" align="center"></el-table-column> -->
						<!-- <el-table-column prop="frombox" label="自容器" header-align="center" align="center"></el-table-column> -->
						<!-- <el-table-column prop="fromboxstr" label="自容器" header-align="center" align="center"></el-table-column>
						
						<el-table-column prop="lot1" label="生产日期" header-align="center" align="center"></el-table-column>
						<el-table-column prop="lot2" label="有效日期" header-align="center" align="center"></el-table-column>
						<el-table-column prop="lot3" label="属性3" header-align="center" align="center"></el-table-column>
						<el-table-column prop="lot4" label="属性4" header-align="center" align="center"></el-table-column>
						<el-table-column prop="lot5" label="属性5" header-align="center" align="center"></el-table-column>
						<el-table-column prop="lot6" label="属性6" header-align="center" align="center"></el-table-column>
						<el-table-column prop="lot7" label="属性7" header-align="center" align="center"></el-table-column>
						<el-table-column prop="lot8" label="属性8" header-align="center" align="center"></el-table-column>
						<el-table-column prop="lot9" label="属性9" header-align="center" align="center"></el-table-column>
						<el-table-column prop="lot10" label="属性10" header-align="center" align="center"></el-table-column>
						<el-table-column prop="remark" label="备注" header-align="center" align="center"></el-table-column>
						<el-table-column prop="backstatus" label="回传状态" header-align="center" align="center"></el-table-column>
						<el-table-column prop="backdate" label="回传时间" header-align="center" align="center"></el-table-column>
						<el-table-column prop="backresult" label="回传结果" header-align="center" align="center"></el-table-column>
						<el-table-column prop="backcode" label="回传码" header-align="center" align="center"></el-table-column>
						<el-table-column prop="warehouse" label="仓库" header-align="center" align="center"></el-table-column>
						<el-table-column prop="pickuser" label="拣货人" header-align="center" align="center"></el-table-column>
						<el-table-column prop="picktime" label="拣货时间" header-align="center" align="center"></el-table-column>
						<el-table-column prop="checkuser" label="复核人" header-align="center" align="center"></el-table-column>
						<el-table-column prop="checktime" label="复核时间" header-align="center" align="center"></el-table-column>
						<el-table-column prop="loader" label="装车人" header-align="center" align="center"></el-table-column>
						<el-table-column prop="loadtime" label="装车时间" header-align="center" align="center"></el-table-column> -->

						<el-row>
							<el-col :span="4">
								<el-form-item label="自库位:">
									<span>{{ props.row.fromloc }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="自箱:">
									<span>{{ props.row.fromtray }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="自格:">
									<span>{{ props.row.fromboxstr }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="批号:">
									<span>{{ props.row.lot }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="生产日期:">
									<span>{{ props.row.lot1 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="有效日期:">
									<span>{{ props.row.lot2 }}</span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="4">
								<el-form-item label="是否加长:">
									<span>{{ props.row.lot3 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="价格:">
									<span>{{ props.row.lot4 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="部门/供应商:">
									<span>{{ props.row.lot5 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="计划单号/工序号:">
									<span>{{ props.row.lot6 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="主制车间:">
									<span>{{ props.row.lot7 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="任务编码:">
									<span>{{ props.row.lot8 }}</span>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :span="4">
								<el-form-item label="新旧:">
									<span>{{ props.row.lot9 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="作废:">
									<span>{{ props.row.lot10 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="炉批号:">
									<span>{{ props.row.lot11 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="材料复验号:">
									<span>{{ props.row.lot12 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="牌号:">
									<span>{{ props.row.lot13 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="属性14:">
									<span>{{ props.row.lot14 }}</span>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :span="4">
								<el-form-item label="属性15:">
									<span>{{ props.row.lot15 }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="拣货人:">
									<span>{{ props.row.pickuser }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="拣货时间:">
									<span>{{ props.row.picktime }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="复核人:">
									<span>{{ props.row.checkuser }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="复核时间:">
									<span>{{ props.row.checktime }}</span>
								</el-form-item>
							</el-col>

							<el-col :span="4">
								<el-form-item label="装车人:">
									<span>{{ props.row.loader}}</span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="4">
								<el-form-item label="装车时间:">
									<span>{{ props.row.loadtime}}</span>
								</el-form-item>
							</el-col>

							<el-col :span="4">
								<el-form-item label="回传状态:">
									<span>{{ props.row.backstatus}}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="回传时间:">
									<span>{{ props.row.backdate}}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="回传结果:">
									<span>{{ props.row.backresult}}</span>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="回传码:">
									<span>{{ props.row.backcode}}</span>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</template>
			</el-table-column>

			<el-table-column label='操作' fixed="right" header-align="center" align="center" width="100">
				<template #default="scope">
					<!-- <el-button v-if="scope.row.status==0"   type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button> -->
					<el-button type="text" size="small" @click="deleteHandle(scope.row.id)" v-if="hasPermission('lswms:orderdetaillist:delete')">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
			layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
			@current-change="pageCurrentChangeHandle">
		</el-pagination>
		<!-- 弹窗, 新增 / 修改 -->
		<orderdetaillistAddOrUpdate v-if="addOrUpdateVisible" ref="addOrUpdate" @refresh-data-list="getDataList">
		</orderdetaillistAddOrUpdate>
	</div>

</template>

<script>
	import DataList from "@/utils/DataList";
	import {
		ref,
		reactive,
		onMounted,
		nextTick
	} from 'vue';
	import orderdetaillistAddOrUpdate from "@/components/lswms/orders/OrderdetaillistAddOrUpdate";
	import {
		getCodeListByCode
	} from "@/network/lswms/base/Codelist.js"
	import {hasPermission} from "@/utils/hasPermission"
	export default {
		name: "orderdetaillist",
		props: {
			dataForm: {
				type: Object
			}
		},
		components: {
			orderdetaillistAddOrUpdate,
		},

		setup(props) {
			const {
				dataForm,
				mixinViewModuleOptions,
				getDataList,
				dataList,
				total,
				page,
				limit,
				dataListLoading,
				dataListSelectionChangeHandle,
				dataListSortChangeHandle,
				pageSizeChangeHandle,
				pageCurrentChangeHandle,
				addOrUpdateHandle,
				deleteHandle,
				exportHandle,
				addOrUpdateVisible,
				dataListSelections,
				addOrUpdate
			} = DataList();

			onMounted(() => {
				mixinViewModuleOptions.value.getDataListIsPage = true;
				mixinViewModuleOptions.value.getDataListURL = '/lswms/orderdetaillist/page';
				mixinViewModuleOptions.value.deleteURL = '/lswms/orderdetaillist';
				mixinViewModuleOptions.value.exportURL = '/lswms/orderdetaillist/export';
				mixinViewModuleOptions.value.deleteIsBatchKey = 'id';
				mixinViewModuleOptions.value.deleteIsBatch = true
				dataForm.value.id = props.dataForm.id;
				dataForm.value.orderkey = props.dataForm.orderkey;
				if (dataForm.value.orderkey) {
					dataForm.value.id = '';
					getDataList()
				}

				orderlistStatusFn();
			})

			// 新增 / 修改
			const addOrUpdateOrderdetailHandleFn = (id) => {
				addOrUpdateVisible.value = true;
				nextTick(function() {
					addOrUpdate.value.dataForm.id = id;
					addOrUpdate.value.dataForm.orderkey = dataForm.value.orderkey;
					addOrUpdate.value.init();
				})
			}

			const orderlistStatus = ref("");

			const orderlistStatusFn = () => {
				getCodeListByCode('OrderlistStatus').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					orderlistStatus.value = res.data;
				}).catch((err) => {});
			}


			return {
				dataForm,
				mixinViewModuleOptions,
				getDataList,
				dataList,
				total,
				page,
				limit,
				dataListLoading,
				dataListSelectionChangeHandle,
				dataListSortChangeHandle,
				pageSizeChangeHandle,
				pageCurrentChangeHandle,
				addOrUpdateHandle,
				deleteHandle,
				exportHandle,
				addOrUpdateVisible,
				dataListSelections,
				addOrUpdate,
				addOrUpdateOrderdetailHandleFn,
				orderlistStatus
			}
		},
		methods: {
			hasPermission,
			reString: function(val) {
				let n = Number(val)
				if (!isNaN(n)) {
					return n
				} else {
					return val
				}
			}
		}
	}
</script>

<style scoped>

</style>
